<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>仪器共享</title>

	<meta name="keywords" content="科研仪器，生命科学仪器，环境检测仪器，实验常用设备，分析仪器">

	<meta name="description" content="中国领先的科研仪器共享平台，让您快速找到各种类型的科学研究仪器。提升闲置仪器利用率，产生更大科研价值。涵盖：生命科学仪器、环境检测仪器、实验常用设备、分析仪器、仪表、物性测试、测量/计量仪器、在线及过程控制仪器。
">
	<!--<link rel="stylesheet" href="new_css/header_footer.css?t=1">-->
	<link rel="stylesheet" href="new_css/userCenter.css">
	<link rel="stylesheet" href="css/new_style.css">
	<link rel="stylesheet" href="js" />
	<script src="new_js/jquery-1.11.3.js"></script>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/common.css">
	<style>
		.myPage {
			margin: 0 auto;
			width: 990px;
			height: 80px;
			font-size: 12px;
			margin-top: 40px;
			margin-left: 431px;
		}
		.sun_title{
			text-align: center !important;
			width: 100%;
			height: 46px;
			line-height: 46px;
			margin: 0 auto;
			padding: 0px !important;
			border-left: 2px solid #fff;
			margin-top: 0px !important;
			cursor: pointer;
		}

		.sun_title:hover{
			background-color: #F4F4F4;
			border-left: 2px solid #FF8A00;
		}

		.activity{
			text-align: center !important;
			width: 100%;
			height: 46px;
			line-height: 46px;
			margin: 0 auto;
			padding: 0px !important;
			background-color: #F4F4F4;
			border-left: 2px solid #FF8A00;
		}

		/*li.list_header1 {*/
			/*padding-left: 10px;*/
		/*}*/
		/*li.list_header1 img {*/
			/*padding-left: 15px;*/
		/*}*/

		.mainList .content .left .secendList1{
			background: #f4f4f4;
			color: #fe9a3c;
			border-left: 1px solid #fe9a3c;
		}
		.mainList .content .left .list_header1 {
			font-size: 16px;
			color: #202020;
			height: 40px;
			line-height: 40px;
			position: relative;
			background: #fff;
		}
		.mainList .content .left .list_header1 img {
			position: absolute;
			top: 16px;
			right: 39px;
		}

		.info-person ul li {
			margin-top: 30px;
		}



		.info-person ul li label{
			width: 98px;
			display: inline-block;
			text-align: left;
			padding-right: 10px;
			padding-left: 30px;
		}

		.info-person ul li input{
			width: 40%;
			padding-left: 10px;
		}
		.info-person ul li select {
			width: 41%;
			height: 48px;
			padding-left: 10px;
		}

		#preview{width:260px;height:190px; overflow:hidden;     margin-left: 142px;}
		#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
		.item4 span{
			color: red;
			vertical-align: middle;
			margin-left: 5px;
		}
		.btn-info-person{
			width: 950px;
			margin: 30px auto;
			margin-left: 122px;
		}
		.btn-one{
			width:179px;
			height:50px;
			background:rgba(255,138,0,1);
			border-radius:5px;
			display: inline-block;
			color: #ffffff;
			line-height: 50px;
			text-align: center;
			font-size:16px;
			margin-left: 20px;
		}

		.mainList .content .left {
			width: 192px;
			float: left;
			border: 1px solid #d3d3d3;
			height: 100%;
			min-height: 1068px;
			text-align: center;
		}
		.mainList {
			width: 1200px;
			margin: auto;
			height: 1107px !important;
			margin-bottom: 30px;
		}

	</style>
	<script>
        $(function() {

            $('#front_header .header_wrap .right').hover(function() {
                $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon2.png');
                $('#front_header .header_wrap .right .out').show();
            }, function() {
                $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon1.png');
                $('#front_header .header_wrap .right .out').hide();
            });

            //-----
            $("#item2").mouseover(function(){
                $(".item2_ul").css("display","block");
            });


            $("#item2").mouseout(function(){
                $(".item2_ul").css("display","none");
            });


            //----
//				$('#item2').on('mouseover',function() {
//					console.log("111111");
//					$('#item2_ul').css('display','block');
//				}
//				$('#item2').on('mouseout',function() {
//					$('#item2_ul').css('display', 'none');
//				}

            $('#sorts').on('mouseover', 'li', function() {
                $(this).find('span img').attr('src', 'images/icon4.png');
            });
            $('#sorts').on('mouseout', 'li', function() {
                $(this).find('span img').attr('src', 'images/icon5.png');
            });

            $('.mainList .content .left li').click(function(){
                $(this).addClass('selected').siblings().removeClass('selected');
            });
        });

	</script>
	<script>
        $(function() {
            $('#front_header .header_wrap .right').hover(function() {
                $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon2.png');
                $('#front_header .header_wrap .right .out').show();
            }, function() {
                $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon1.png');
                $('#front_header .header_wrap .right .out').hide();
            });
            $('#sorts').on('mouseover', 'li', function() {
                $(this).find('span img').attr('src', 'images/icon4.png');
            });
            $('#sorts').on('mouseout', 'li', function() {
                $(this).find('span img').attr('src', 'images/icon5.png');
            });
            $('.mainList .content .left li').click(function() {
                $('.mainList .content .left li').removeClass('selected');
                $(this).addClass('selected');
            });
            $('.mainList .content .left .list_header').click(function() {
                if($('.mainList .content .left .secendList').is(':hidden')) {
                    $('.mainList .content .left .secendList').slideDown();
                    $('.mainList .content .left .list_header img').attr("src", "images/insUser_icon.png");
                } else {
                    $('.mainList .content .left .secendList').slideUp();
                    $('.mainList .content .left .list_header img').attr("src", "images/icon4.png");
                };

            });
            $('.mainList .content .left .list_header1').click(function() {
                if($('.mainList .content .left .secendList1').is(':hidden')) {
                    $('.mainList .content .left .secendList1').slideDown();
                    $('.mainList .content .left .list_header1 img').attr("src", "images/insUser_icon.png");
                } else {
                    $('.mainList .content .left .secendList1').slideUp();
                    $('.mainList .content .left .list_header1 img').attr("src", "images/icon4.png");
                };

            });
        });
	</script>
</head>

<body style="background:#fff;">
<!--header-->
<header>
	<!--Top head navigation bgc-->
	<div class="top-nav-bgc">
		<!--Top head navigation-->
		<div class="top-nav">
			<!--left-->
			<div class="top-nav-left fl">
				<!--img-->
				<img src="images/home.png">
				<!--companyName-->
				<span><a href="index">观迎访问仪器共享平台</a></span>
			</div>
			<!--right-->
			<div class="top-nav-right fr" >
				<!--username-info-->
				<div class="username-info">
					<!--userImg-->
					<div class="userImg fl">
						<img src="images/user.png">
					</div>
					<!--username-->
					<div class="username fl">
						<ul>
							<li id="username" >
								<a onclick="userImg();" href="">itwangyang@foxmail.com</a>
								<img id="userImg" src="images/icon1.png">
							</li>
						</ul>

						<ul  class="dropdown-nav" id="dropdown-nav" style="display: none">
							<!--<img src="images/icon9.png">-->
							<li>
								<a class="active" href="">用户中心</a>
							</li>
							<li>
								<a href="">退出登录</a>
							</li>
						</ul>
					</div>

					<!--  <div class="fl">
                         <ul>
                             <li class="fl" style="margin-right: 20px"><a href="">登录</a></li>
                             <li class="fl"><a href="">注册</a></li>
                         </ul>
                     </div> -->


				</div>
			</div>
		</div>
	</div>
	<!--header search-->
	<div class="header-search clearfix">
		<!--left-->
		<div class="header-search-lef fl">
			<div class="logo-name fl" ><a href="index">科研仪器共享平台</a> </div>
			<div class="shopping-Mall fl">
				<div class="logo-mall">
					<a href=""><img src="images/icon3.png"></a>
				</div>
				<div class="mall-name">
					<a href="">yq.shang.com</a>
				</div>
			</div>
		</div>
	</div>
</header>



<div class="mainList">
	<!--<div class="bNav">您的位置：首页><span>用户中心</span></div>-->
	<div class="content">
		<div class="left">
			<div class="title">用户中心</div>
			<ul>
				<li class="list_header">仪器订单<img src="images/insUser_icon.png" /></li>
			</ul>
			<ul class="secendList" id="clickleft">
				<li>待确认</li>
				<li>待实验 </li>
				<li>已完成</li>
				<li >未评价</li>
			</ul>

			<ul>
				<li class="list_header">服务订单<img src="images/insUser_icon.png" /></li>
			</ul>
			<ul class="secendList" id="hahaxixi">
				<li>个人资料</li>
				<li>申请仪器管理人</li>
			</ul>


			<script>
                var ul = document.getElementById('clickleft');
                var lis = ul.getElementsByTagName('li');
                for(var i=0;i<lis.length;i++){
                    lis[i].onclick = function(){
                        document.getElementById("span1").innerHTML = this.innerHTML;
                    }
                }
			</script>


			<script>
                var ul1 = document.getElementById('hahaxixi');
                var lis1 = ul1.getElementsByTagName('li');
                for(var j=0;j<lis1.length;j++){
                    lis1[j].onclick = function(){
                        document.getElementById('span1').innerHTML = this.innerHTML;
                    }
                }
			</script>



		</div>
		<div class="right">
			<div class="title"><span id="span1">个人资料</span></div>
			<!--info-person-->
			<div class="info-person">
				<ul>
					<!--头像-->
					<li>

						<!--<img src="images/addPIC.png">-->
						<!--<a href="#">上传头像</a>-->
<!--上传头像-->
						<div id="preview">
							<img id="imghead" width=100% height=auto border=0 src='images/qq2.png'>
						</div>
						<label>上传头像</label>
						<input type="file" onchange="previewImage(this)" style="border: none;
    outline: none;
    padding-top: 20px;"/>
						<!--good-->
						<!--bvsilvbdil-->
					</li>

					<li>
						<label>用户名&nbsp;</label>
						<input type="text" name=""  value="" />
					</li>
					<li class="item4">
						<label>单位名称<span>*</span></label>
						<select>
							<option>厦门串串环保科技有限公司</option>
							<option>厦门串串环保科技有限公司</option>
							<option>厦门串串环保科技有限公司</option>
							<option>厦门串串环保科技有限公司</option>
							<option>厦门串串环保科技有限公司</option>
							<option>厦门串串环保科技有限公司</option>
							<option>厦门串串环保科技有限公司</option>
							<option>厦门串串环保科技有限公司</option>
						</select>
					</li>
					<li>
						<label>单位地址</label>
						<input type="text" name=""  value="" />
					</li>
					<li>
						<label>联系电话</label>
						<input type="text" name=""  value="" />
					</li>
					<li>
						<label>电子邮箱</label>
						<input type="text" name=""  value="" />
					</li>
					<li>
						<label>身份证件</label>
						<input type="text" name=""  value="" />
					</li>

					<li>
						<label>真实姓名</label>
						<input type="text" name=""  value="" />
					</li>

					<li>
						<label>邮政编码</label>
						<input type="text" name=""  value="" />
					</li>

				</ul>
			</div>

<!---->
			<!--btn-->
			<div class="btn-info-person">
				<a href="#" class="btn-one">保存</a>
			</div>








		</div>
	</div>

</div>


<!--footer-->
<footer>
	<div class="foot clearfix">
		<p>&copy; 2015-2020 科研仪器 版权所有 技术支持：科研仪器共享平台 支持电话：010-123658987 </p>
	</div>
</footer>

<script src="js/jquery-1.11.3.js"></script>
<script src="js/common.js"></script>
<script type="text/javascript">
    function deleteElement(Obj){
        Obj.parentNode.parentNode.removeChild(Obj.parentNode);
    }
</script>

<script>
    //倒计时效果js代码
    function checktime(i){
        if(i<10){
            i="0"+i;

        }
        else{i=i;}
        return i;
    }
    function freshTime(){
        var endtime=new Date('2018/09/20');
        var nowtime=new Date();
        var lefttime=parseInt(endtime.getTime()-nowtime.getTime());//这是毫秒，如果再/1000就是秒
        // 获取剩下的日、小时、分钟、秒钟
        // 一天有多少毫秒，一小时有多少毫秒，一分钟有多少毫秒，一秒钟有多少毫秒
        var dm=24*60*60*1000;
        var d=parseInt(lefttime/dm);
        var hm=60*60*1000;
        var h=parseInt((lefttime/hm)%24);
        var mm=60*1000;
        var m=parseInt((lefttime/mm)%60);
        var s=parseInt((lefttime/1000)%60);
        m=checktime(m);
        s=checktime(s);
        document.getElementById('LeftTime').innerHTML=d+"天"+h+"小时"+m+"分钟"+s+"秒";
        if (lefttime<0) {
            document.getElementById('LeftTime').innerHTML="活动已经结束！";
        }
    }
    freshTime();
    var sh;
    sh=setInterval('freshTime()',1000)
</script>



<script type="text/javascript">
    //图片上传预览    IE是用了滤镜。
    function previewImage(file)
    {
        var MAXWIDTH  = 260;
        var MAXHEIGHT = 180;
        var div = document.getElementById('preview');
        if (file.files && file.files[0])
        {
            div.innerHTML ='<img id=imghead>';
            var img = document.getElementById('imghead');
            img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
            }
            var reader = new FileReader();
            reader.onload = function(evt){img.src = evt.target.result;}
            reader.readAsDataURL(file.files[0]);
        }
        else //兼容IE
        {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
        }
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = {top:0, left:0, width:width, height:height};
        if( width>maxWidth || height>maxHeight )
        {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if( rateWidth > rateHeight )
            {
                param.width =  maxWidth;
                param.height = Math.round(height / rateWidth);
            }else
            {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
</script>


</body>

</html>